<!DOCTYPE html>
<html>
  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    <meta charset="UTF-8"><style>/*
 * Bootstrap v2.2.1
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover,
a:active {
  outline: 0;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
}
a {
  color: #08c;
  text-decoration: none;
}
a:hover {
  color: #005580;
  text-decoration: underline;
}
.row {
  margin-left: -20px;
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
  line-height: 0;
}
.row:after {
  clear: both;
}
[class*="span"] {
  float: left;
  min-height: 1px;
  margin-left: 20px;
}
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.span12 {
  width: 940px;
}
.span11 {
  width: 860px;
}
.span10 {
  width: 780px;
}
.span9 {
  width: 700px;
}
.span8 {
  width: 620px;
}
.span7 {
  width: 540px;
}
.span6 {
  width: 460px;
}
.span5 {
  width: 380px;
}
.span4 {
  width: 300px;
}
.span3 {
  width: 220px;
}
.span2 {
  width: 140px;
}
.span1 {
  width: 60px;
}
[class*="span"].pull-right,
.row-fluid [class*="span"].pull-right {
  float: right;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
}
.container:before,
.container:after {
  display: table;
  content: "";
  line-height: 0;
}
.container:after {
  clear: both;
}
p {
  margin: 0 0 10px;
}
.lead {
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}
small {
  font-size: 85%;
}
h1 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
  line-height: 20px;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1 small {
  font-weight: normal;
  line-height: 1;
  color: #999;
}
h1 {
  line-height: 40px;
}
h1 {
  font-size: 38.5px;
}
h1 small {
  font-size: 24.5px;
}
body {
  margin-top: 90px;
}
.header {
  position: fixed;
  top: 0;
  left: 50%;
  margin-left: -480px;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding-top: 10px;
  z-index: 10;
}
.footer {
  color: #ddd;
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
}
.footer a {
  color: #ccc;
  text-decoration: underline;
}
.the-icons {
  font-size: 14px;
  line-height: 24px;
}
.switch {
  position: absolute;
  right: 0;
  bottom: 10px;
  color: #666;
}
.switch input {
  margin-right: 0.3em;
}
.codesOn .i-name {
  display: none;
}
.codesOn .i-code {
  display: inline;
}
.i-code {
  display: none;
}
@font-face {
      font-family: 'porto-icons';
      src: url('./font/porto-icons.eot?97939370');
      src: url('./font/porto-icons.eot?97939370#iefix') format('embedded-opentype'),
           url('./font/porto-icons.woff?97939370') format('woff'),
           url('./font/porto-icons.ttf?97939370') format('truetype'),
           url('./font/porto-icons.svg?97939370#porto-icons') format('svg');
      font-weight: normal;
      font-style: normal;
    }
     
     
    .demo-icon
    {
      font-family: "porto-icons";
      font-style: normal;
      font-weight: normal;
      speak: none;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
    }
     </style>
    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/porto-icons-ie7.css"><![endif]-->
    <script>
      function toggleCodes(on) {
        var obj = document.getElementById('icons');
      
        if (on) {
          obj.className += ' codesOn';
        } else {
          obj.className = obj.className.replace(' codesOn', '');
        }
      }
      
    </script>
  </head>
  <body>
    <div class="container header">
      <h1>
        porto-icons
         <small>font demo</small>
      </h1>
      <label class="switch">
        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
      </label>
    </div>
    <div id="icons" class="container">
      <div class="row">
        <div title="Code: 0xf800" class="the-icons span3"><i class="demo-icon porto-icon-up-open">&#xf800;</i> <span class="i-name">porto-icon-up-open</span><span class="i-code">0xf800</span></div>
        <div title="Code: 0xf801" class="the-icons span3"><i class="demo-icon porto-icon-right-open">&#xf801;</i> <span class="i-name">porto-icon-right-open</span><span class="i-code">0xf801</span></div>
        <div title="Code: 0xf802" class="the-icons span3"><i class="demo-icon porto-icon-left-open">&#xf802;</i> <span class="i-name">porto-icon-left-open</span><span class="i-code">0xf802</span></div>
        <div title="Code: 0xf803" class="the-icons span3"><i class="demo-icon porto-icon-down-open">&#xf803;</i> <span class="i-name">porto-icon-down-open</span><span class="i-code">0xf803</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf804" class="the-icons span3"><i class="demo-icon porto-icon-up-open-mini">&#xf804;</i> <span class="i-name">porto-icon-up-open-mini</span><span class="i-code">0xf804</span></div>
        <div title="Code: 0xf805" class="the-icons span3"><i class="demo-icon porto-icon-right-open-mini">&#xf805;</i> <span class="i-name">porto-icon-right-open-mini</span><span class="i-code">0xf805</span></div>
        <div title="Code: 0xf806" class="the-icons span3"><i class="demo-icon porto-icon-left-open-mini">&#xf806;</i> <span class="i-name">porto-icon-left-open-mini</span><span class="i-code">0xf806</span></div>
        <div title="Code: 0xf807" class="the-icons span3"><i class="demo-icon porto-icon-down-open-mini">&#xf807;</i> <span class="i-name">porto-icon-down-open-mini</span><span class="i-code">0xf807</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf808" class="the-icons span3"><i class="demo-icon porto-icon-up-open-big">&#xf808;</i> <span class="i-name">porto-icon-up-open-big</span><span class="i-code">0xf808</span></div>
        <div title="Code: 0xf809" class="the-icons span3"><i class="demo-icon porto-icon-right-open-big">&#xf809;</i> <span class="i-name">porto-icon-right-open-big</span><span class="i-code">0xf809</span></div>
        <div title="Code: 0xf80a" class="the-icons span3"><i class="demo-icon porto-icon-left-open-big">&#xf80a;</i> <span class="i-name">porto-icon-left-open-big</span><span class="i-code">0xf80a</span></div>
        <div title="Code: 0xf80b" class="the-icons span3"><i class="demo-icon porto-icon-down-open-big">&#xf80b;</i> <span class="i-name">porto-icon-down-open-big</span><span class="i-code">0xf80b</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf80c" class="the-icons span3"><i class="demo-icon porto-icon-up-open-huge">&#xf80c;</i> <span class="i-name">porto-icon-up-open-huge</span><span class="i-code">0xf80c</span></div>
        <div title="Code: 0xf80d" class="the-icons span3"><i class="demo-icon porto-icon-right-open-huge">&#xf80d;</i> <span class="i-name">porto-icon-right-open-huge</span><span class="i-code">0xf80d</span></div>
        <div title="Code: 0xf80e" class="the-icons span3"><i class="demo-icon porto-icon-left-open-huge">&#xf80e;</i> <span class="i-name">porto-icon-left-open-huge</span><span class="i-code">0xf80e</span></div>
        <div title="Code: 0xf80f" class="the-icons span3"><i class="demo-icon porto-icon-down-open-huge">&#xf80f;</i> <span class="i-name">porto-icon-down-open-huge</span><span class="i-code">0xf80f</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf810" class="the-icons span3"><i class="demo-icon porto-icon-angle-up">&#xf810;</i> <span class="i-name">porto-icon-angle-up</span><span class="i-code">0xf810</span></div>
        <div title="Code: 0xf811" class="the-icons span3"><i class="demo-icon porto-icon-angle-right">&#xf811;</i> <span class="i-name">porto-icon-angle-right</span><span class="i-code">0xf811</span></div>
        <div title="Code: 0xf812" class="the-icons span3"><i class="demo-icon porto-icon-angle-left">&#xf812;</i> <span class="i-name">porto-icon-angle-left</span><span class="i-code">0xf812</span></div>
        <div title="Code: 0xf813" class="the-icons span3"><i class="demo-icon porto-icon-angle-down">&#xf813;</i> <span class="i-name">porto-icon-angle-down</span><span class="i-code">0xf813</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf814" class="the-icons span3"><i class="demo-icon porto-icon-basket">&#xf814;</i> <span class="i-name">porto-icon-basket</span><span class="i-code">0xf814</span></div>
        <div title="Code: 0xf815" class="the-icons span3"><i class="demo-icon porto-icon-mini-cart">&#xf815;</i> <span class="i-name">porto-icon-mini-cart</span><span class="i-code">0xf815</span></div>
        <div title="Code: 0xf816" class="the-icons span3"><i class="demo-icon porto-icon-heart">&#xf816;</i> <span class="i-name">porto-icon-heart</span><span class="i-code">0xf816</span></div>
        <div title="Code: 0xf818" class="the-icons span3"><i class="demo-icon porto-icon-search">&#xf818;</i> <span class="i-name">porto-icon-search</span><span class="i-code">0xf818</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf819" class="the-icons span3"><i class="demo-icon porto-icon-cancel">&#xf819;</i> <span class="i-name">porto-icon-cancel</span><span class="i-code">0xf819</span></div>
        <div title="Code: 0xf81a" class="the-icons span3"><i class="demo-icon porto-icon-cancel-mini">&#xf81a;</i> <span class="i-name">porto-icon-cancel-mini</span><span class="i-code">0xf81a</span></div>
        <div title="Code: 0xf820" class="the-icons span3"><i class="demo-icon porto-icon-up-dir">&#xf820;</i> <span class="i-name">porto-icon-up-dir</span><span class="i-code">0xf820</span></div>
        <div title="Code: 0xf821" class="the-icons span3"><i class="demo-icon porto-icon-right-dir">&#xf821;</i> <span class="i-name">porto-icon-right-dir</span><span class="i-code">0xf821</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf822" class="the-icons span3"><i class="demo-icon porto-icon-left-dir">&#xf822;</i> <span class="i-name">porto-icon-left-dir</span><span class="i-code">0xf822</span></div>
        <div title="Code: 0xf823" class="the-icons span3"><i class="demo-icon porto-icon-down-dir">&#xf823;</i> <span class="i-name">porto-icon-down-dir</span><span class="i-code">0xf823</span></div>
        <div title="Code: 0xf824" class="the-icons span3"><i class="demo-icon porto-icon-phone">&#xf824;</i> <span class="i-name">porto-icon-phone</span><span class="i-code">0xf824</span></div>
        <div title="Code: 0xf825" class="the-icons span3"><i class="demo-icon porto-icon-pencil">&#xf825;</i> <span class="i-name">porto-icon-pencil</span><span class="i-code">0xf825</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf826" class="the-icons span3"><i class="demo-icon porto-icon-pencil-mini">&#xf826;</i> <span class="i-name">porto-icon-pencil-mini</span><span class="i-code">0xf826</span></div>
        <div title="Code: 0xf827" class="the-icons span3"><i class="demo-icon porto-icon-menu">&#xf827;</i> <span class="i-name">porto-icon-menu</span><span class="i-code">0xf827</span></div>
        <div title="Code: 0xf828" class="the-icons span3"><i class="demo-icon porto-icon-location">&#xf828;</i> <span class="i-name">porto-icon-location</span><span class="i-code">0xf828</span></div>
        <div title="Code: 0xf829" class="the-icons span3"><i class="demo-icon porto-icon-mail">&#xf829;</i> <span class="i-name">porto-icon-mail</span><span class="i-code">0xf829</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf82a" class="the-icons span3"><i class="demo-icon porto-icon-clock">&#xf82a;</i> <span class="i-name">porto-icon-clock</span><span class="i-code">0xf82a</span></div>
        <div title="Code: 0xf82b" class="the-icons span3"><i class="demo-icon porto-icon-ok">&#xf82b;</i> <span class="i-name">porto-icon-ok</span><span class="i-code">0xf82b</span></div>
        <div title="Code: 0xf82c" class="the-icons span3"><i class="demo-icon porto-icon-plus-squared-alt">&#xf82c;</i> <span class="i-name">porto-icon-plus-squared-alt</span><span class="i-code">0xf82c</span></div>
        <div title="Code: 0xf82d" class="the-icons span3"><i class="demo-icon porto-icon-minus-squared-alt">&#xf82d;</i> <span class="i-name">porto-icon-minus-squared-alt</span><span class="i-code">0xf82d</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf82e" class="the-icons span3"><i class="demo-icon porto-icon-plus-squared">&#xf82e;</i> <span class="i-name">porto-icon-plus-squared</span><span class="i-code">0xf82e</span></div>
        <div title="Code: 0xf82f" class="the-icons span3"><i class="demo-icon porto-icon-minus-squared">&#xf82f;</i> <span class="i-name">porto-icon-minus-squared</span><span class="i-code">0xf82f</span></div>
        <div title="Code: 0xf830" class="the-icons span3"><i class="demo-icon porto-icon-truck">&#xf830;</i> <span class="i-name">porto-icon-truck</span><span class="i-code">0xf830</span></div>
        <div title="Code: 0xf831" class="the-icons span3"><i class="demo-icon porto-icon-dollar">&#xf831;</i> <span class="i-name">porto-icon-dollar</span><span class="i-code">0xf831</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf832" class="the-icons span3"><i class="demo-icon porto-icon-lifebuoy">&#xf832;</i> <span class="i-name">porto-icon-lifebuoy</span><span class="i-code">0xf832</span></div>
        <div title="Code: 0xf833" class="the-icons span3"><i class="demo-icon porto-icon-facebook">&#xf833;</i> <span class="i-name">porto-icon-facebook</span><span class="i-code">0xf833</span></div>
        <div title="Code: 0xf834" class="the-icons span3"><i class="demo-icon porto-icon-twitter">&#xf834;</i> <span class="i-name">porto-icon-twitter</span><span class="i-code">0xf834</span></div>
        <div title="Code: 0xf835" class="the-icons span3"><i class="demo-icon porto-icon-linkedin-squared">&#xf835;</i> <span class="i-name">porto-icon-linkedin-squared</span><span class="i-code">0xf835</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf836" class="the-icons span3"><i class="demo-icon porto-icon-pinterest">&#xf836;</i> <span class="i-name">porto-icon-pinterest</span><span class="i-code">0xf836</span></div>
        <div title="Code: 0xf837" class="the-icons span3"><i class="demo-icon porto-icon-gplus">&#xf837;</i> <span class="i-name">porto-icon-gplus</span><span class="i-code">0xf837</span></div>
        <div title="Code: 0xf838" class="the-icons span3"><i class="demo-icon porto-icon-youtube">&#xf838;</i> <span class="i-name">porto-icon-youtube</span><span class="i-code">0xf838</span></div>
        <div title="Code: 0xf839" class="the-icons span3"><i class="demo-icon porto-icon-th">&#xf839;</i> <span class="i-name">porto-icon-th</span><span class="i-code">0xf839</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf83a" class="the-icons span3"><i class="demo-icon porto-icon-th-list">&#xf83a;</i> <span class="i-name">porto-icon-th-list</span><span class="i-code">0xf83a</span></div>
        <div title="Code: 0xf83b" class="the-icons span3"><i class="demo-icon porto-icon-chart-bar">&#xf83b;</i> <span class="i-name">porto-icon-chart-bar</span><span class="i-code">0xf83b</span></div>
        <div title="Code: 0xf83c" class="the-icons span3"><i class="demo-icon porto-icon-heart-empty">&#xf83c;</i> <span class="i-name">porto-icon-heart-empty</span><span class="i-code">0xf83c</span></div>
        <div title="Code: 0xf840" class="the-icons span3"><i class="demo-icon porto-icon-up">&#xf840;</i> <span class="i-name">porto-icon-up</span><span class="i-code">0xf840</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf841" class="the-icons span3"><i class="demo-icon porto-icon-right">&#xf841;</i> <span class="i-name">porto-icon-right</span><span class="i-code">0xf841</span></div>
        <div title="Code: 0xf842" class="the-icons span3"><i class="demo-icon porto-icon-down">&#xf842;</i> <span class="i-name">porto-icon-down</span><span class="i-code">0xf842</span></div>
        <div title="Code: 0xf843" class="the-icons span3"><i class="demo-icon porto-icon-left">&#xf843;</i> <span class="i-name">porto-icon-left</span><span class="i-code">0xf843</span></div>
        <div title="Code: 0xf844" class="the-icons span3"><i class="demo-icon porto-icon-star">&#xf844;</i> <span class="i-name">porto-icon-star</span><span class="i-code">0xf844</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf845" class="the-icons span3"><i class="demo-icon porto-icon-star-empty">&#xf845;</i> <span class="i-name">porto-icon-star-empty</span><span class="i-code">0xf845</span></div>
        <div title="Code: 0xf846" class="the-icons span3"><i class="demo-icon porto-icon-ok-circled">&#xf846;</i> <span class="i-name">porto-icon-ok-circled</span><span class="i-code">0xf846</span></div>
        <div title="Code: 0xf847" class="the-icons span3"><i class="demo-icon porto-icon-cancel-circled">&#xf847;</i> <span class="i-name">porto-icon-cancel-circled</span><span class="i-code">0xf847</span></div>
        <div title="Code: 0xf848" class="the-icons span3"><i class="demo-icon porto-icon-help-circled">&#xf848;</i> <span class="i-name">porto-icon-help-circled</span><span class="i-code">0xf848</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf849" class="the-icons span3"><i class="demo-icon porto-icon-info-circled">&#xf849;</i> <span class="i-name">porto-icon-info-circled</span><span class="i-code">0xf849</span></div>
        <div title="Code: 0xf84a" class="the-icons span3"><i class="demo-icon porto-icon-attention">&#xf84a;</i> <span class="i-name">porto-icon-attention</span><span class="i-code">0xf84a</span></div>
        <div title="Code: 0xf84b" class="the-icons span3"><i class="demo-icon porto-icon-mobile">&#xf84b;</i> <span class="i-name">porto-icon-mobile</span><span class="i-code">0xf84b</span></div>
        <div title="Code: 0xf84c" class="the-icons span3"><i class="demo-icon porto-icon-mail-alt">&#xf84c;</i> <span class="i-name">porto-icon-mail-alt</span><span class="i-code">0xf84c</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf84d" class="the-icons span3"><i class="demo-icon porto-icon-skype">&#xf84d;</i> <span class="i-name">porto-icon-skype</span><span class="i-code">0xf84d</span></div>
        <div title="Code: 0xf84e" class="the-icons span3"><i class="demo-icon porto-icon-doc">&#xf84e;</i> <span class="i-name">porto-icon-doc</span><span class="i-code">0xf84e</span></div>
        <div title="Code: 0xf850" class="the-icons span3"><i class="demo-icon porto-icon-user">&#xf850;</i> <span class="i-name">porto-icon-user</span><span class="i-code">0xf850</span></div>
        <div title="Code: 0xf851" class="the-icons span3"><i class="demo-icon porto-icon-help">&#xf851;</i> <span class="i-name">porto-icon-help</span><span class="i-code">0xf851</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf852" class="the-icons span3"><i class="demo-icon porto-icon-info">&#xf852;</i> <span class="i-name">porto-icon-info</span><span class="i-code">0xf852</span></div>
        <div title="Code: 0xf853" class="the-icons span3"><i class="demo-icon porto-icon-help-circled-alt">&#xf853;</i> <span class="i-name">porto-icon-help-circled-alt</span><span class="i-code">0xf853</span></div>
        <div title="Code: 0xf854" class="the-icons span3"><i class="demo-icon porto-icon-info-circled-alt">&#xf854;</i> <span class="i-name">porto-icon-info-circled-alt</span><span class="i-code">0xf854</span></div>
        <div title="Code: 0xf855" class="the-icons span3"><i class="demo-icon porto-icon-chevron-left">&#xf855;</i> <span class="i-name">porto-icon-chevron-left</span><span class="i-code">0xf855</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf856" class="the-icons span3"><i class="demo-icon porto-icon-chevron-right">&#xf856;</i> <span class="i-name">porto-icon-chevron-right</span><span class="i-code">0xf856</span></div>
        <div title="Code: 0xf857" class="the-icons span3"><i class="demo-icon porto-icon-reply">&#xf857;</i> <span class="i-name">porto-icon-reply</span><span class="i-code">0xf857</span></div>
        <div title="Code: 0xf858" class="the-icons span3"><i class="demo-icon porto-icon-paper-plane">&#xf858;</i> <span class="i-name">porto-icon-paper-plane</span><span class="i-code">0xf858</span></div>
        <div title="Code: 0xf859" class="the-icons span3"><i class="demo-icon porto-icon-magnify">&#xf859;</i> <span class="i-name">porto-icon-magnify</span><span class="i-code">0xf859</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf85a" class="the-icons span3"><i class="demo-icon porto-icon-zoom-in">&#xf85a;</i> <span class="i-name">porto-icon-zoom-in</span><span class="i-code">0xf85a</span></div>
        <div title="Code: 0xf85b" class="the-icons span3"><i class="demo-icon porto-icon-zoom-out">&#xf85b;</i> <span class="i-name">porto-icon-zoom-out</span><span class="i-code">0xf85b</span></div>
        <div title="Code: 0xf860" class="the-icons span3"><i class="demo-icon porto-icon-chat">&#xf860;</i> <span class="i-name">porto-icon-chat</span><span class="i-code">0xf860</span></div>
        <div title="Code: 0xf861" class="the-icons span3"><i class="demo-icon porto-icon-folder">&#xf861;</i> <span class="i-name">porto-icon-folder</span><span class="i-code">0xf861</span></div>
      </div>
      <div class="row">
        <div title="Code: 0xf862" class="the-icons span3"><i class="demo-icon porto-icon-folder-open">&#xf862;</i> <span class="i-name">porto-icon-folder-open</span><span class="i-code">0xf862</span></div>
        <div title="Code: 0xf863" class="the-icons span3"><i class="demo-icon porto-icon-tag">&#xf863;</i> <span class="i-name">porto-icon-tag</span><span class="i-code">0xf863</span></div>
        <div title="Code: 0xf864" class="the-icons span3"><i class="demo-icon porto-icon-tags">&#xf864;</i> <span class="i-name">porto-icon-tags</span><span class="i-code">0xf864</span></div>
        <div title="Code: 0xf865" class="the-icons span3"><i class="demo-icon porto-icon-calendar">&#xf865;</i> <span class="i-name">porto-icon-calendar</span><span class="i-code">0xf865</span></div>
      </div>
    </div>
    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
  </body>
</html>